<template>
  <div id="panel">
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <el-form-item label="时间段：">
          <el-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <div class="searchBtnBox">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
        </div>
      </el-form>
    </el-card>
    <el-card class="pageContent">
      <el-table :data="tableData" stripe :height="tableHeight">
        <el-table-column prop="monitorTime" label="监测时间" />
        <el-table-column prop="deviceNo" label="设备编号" />
        <el-table-column prop="warningInfo" label="预警信息" />
        <el-table-column prop="handleStatus" label="处理状态" />
        <el-table-column prop="backgroundWater" label="背景水" />
        <el-table-column prop="currentWater" label="当前水" />
        <el-table-column prop="peakDiff" label="峰值差异" />
        <el-table-column prop="exDiff" label="Ex差异" />
        <el-table-column prop="emDiff" label="Em差异" />
        <el-table-column prop="compareResult" label="对比结果" />
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="viewChart(scope.row)"
              >查看图表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- ECharts图表弹窗 -->
    <el-dialog
      :title="chartTitle"
      :visible.sync="chartDialogVisible"
      width="800px"
      append-to-body
    >
      <div ref="chartContainer" style="width: 100%; height: 400px"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chartDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "WaterMonitor",
  data() {
    return {
      tableHeight: window.innerHeight - 300,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        timeRange: [],
      },
      tableData: [
        {
          monitorTime: "2024-09-11 16:50:20",
          deviceNo: "SW-Z-18-618-20-0…",
          warningInfo: "背景水 单位: nm …",
          handleStatus: "未处理",
          backgroundWater: "Em:545,Ex:500,H…",
          currentWater: "Em:355,Ex:432,H…",
          peakDiff: 198.95,
          exDiff: 145,
          emDiff: 113,
          compareResult: "公司名称: 航奥生…",
        },
        {
          monitorTime: "2024-09-11 16:43:20",
          deviceNo: "SW-Z-18-618-20-0…",
          warningInfo: "背景水 单位: nm …",
          handleStatus: "未处理",
          backgroundWater: "Em:540,Ex:495,H…",
          currentWater: "Em:355,Ex:432,H…",
          peakDiff: 313.87,
          exDiff: 140,
          emDiff: 108,
          compareResult: "公司名称: 航奥生…",
        },
      ],
      chartDialogVisible: false,
      chartTitle: "数据对比图表",
      myChart: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      // 实际应调用接口获取数据，这里用模拟数据
      this.tableData = [
        {
          monitorTime: "2024-09-11 16:50:20",
          deviceNo: "SW-Z-18-618-20-0…",
          warningInfo: "背景水 单位: nm …",
          handleStatus: "未处理",
          backgroundWater: "Em:545,Ex:500,H…",
          currentWater: "Em:355,Ex:432,H…",
          peakDiff: 198.95,
          exDiff: 145,
          emDiff: 113,
          compareResult: "公司名称: 航奥生…",
        },
        {
          monitorTime: "2024-09-11 16:43:20",
          deviceNo: "SW-Z-18-618-20-0…",
          warningInfo: "背景水 单位: nm …",
          handleStatus: "未处理",
          backgroundWater: "Em:540,Ex:495,H…",
          currentWater: "Em:355,Ex:432,H…",
          peakDiff: 313.87,
          exDiff: 140,
          emDiff: 108,
          compareResult: "公司名称: 航奥生…",
        },
      ];
    },
    viewChart(row) {
      this.chartDialogVisible = true;
      this.$nextTick(() => {
        this.initChart(row);
      });
    },
    initChart(row) {
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(this.$refs.chartContainer);
      const option = {
        title: {
          text: "数据对比",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["峰值差异", "Ex差异", "Em差异"],
        },
        xAxis: {
          type: "category",
          data: ["数据项1", "数据项2"], // 可根据实际情况从row中提取
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "峰值差异",
            data: [row.peakDiff, 0], // 示例数据，可根据实际调整
            type: "bar",
          },
          {
            name: "Ex差异",
            data: [row.exDiff, 0],
            type: "bar",
          },
          {
            name: "Em差异",
            data: [row.emDiff, 0],
            type: "bar",
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .el-form-item__content {
      min-width: 200px;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 10px 0 10px 20px;
    }
  }

  .pageContent {
    .el-table {
      width: 100%;
    }
  }
}
</style>
